
<template>
  <page>
    <!--    查询条件-->
    <el-row slot="where">
      <el-col :span="24" class="k-text-left k-lh-2-2">
        <el-button class="k-mr-10" @click="handleCreate">新增</el-button>
        <el-button class="k-mr-10"> <el-upload
          action=""
          :show-file-list="false"
          :multiple="false"
          :file-list="fileList"
          :before-upload="uploadChangeHandel"
          accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
        >导入</el-upload>
        </el-button>
        <el-button class="k-mr-10">
          <a download="重点关注人员导入模板.xlsx" href="/template/重点关注人员导入模板.xlsx">导入模板下载</a>
        </el-button>
        <el-input v-model="WHERE.search" class="k-width-150-p k-mr-10" placeholder="姓名：" />
        <el-button type="primary" @click="_search">查询</el-button>
        <el-button type="info" @click="_reset">重置</el-button>
      </el-col>
    </el-row>
    <!--    表格-->
    <el-table
      slot="table"
      ref="tb"
      v-loading="LOADING"
      :data="CLASS_TABLE_DATA"
      :size="SIZE"
      border
      :height="LIST_HEIGHT"
      style="width: 100%"
      @selection-change="_handleSelectionChange"
    >
      <el-table-column
        type="selection"
        width="55"
      />
      <template v-for="(item) in setting">
        <el-table-column
          v-if="item.key === 'action'"
          :key="item.id"
          :label="item.name"
          :prop="item.key"
          :width="item.value"
          :fixed="item.fixed"
        >
          <template slot-scope="scope">
            <el-button @click="handleEdit(scope.row)">编辑</el-button>
            <el-button @click="handleDel(scope.row)">删除</el-button>
          </template>

        </el-table-column>
        <el-table-column
          v-else
          :key="item.id"
          :label="item.name"
          :prop="item.key"
          :width="item.value"
        />
      </template>
    </el-table>
    <!--    分页-->
    <pagination slot="pagination" />
    <!--    弹窗-->
    <template slot="modal">
      <form-modal :visible.sync="FORM_VISIBLE" :type="FORM_TYPE" :data="FORM_DATA" @refresh="_getList" />
    </template>
  </page>
</template>

<script>
import list from '@/list'
import FocusClass from '@/models/focus-class'
import { focusDel, focusGetList, focusBlukCreate } from '@/api/focus'
import formModal from './components/form'
import * as XLSX from 'xlsx'
const focusClass = new FocusClass()
export default {
  name: 'DeepInterpretationOrder',
  components: { formModal },
  mixins: [list],
  data() {
    return {
      caseRequestURLType: '',
      setting: focusClass.list(),
      fileList: [],
      WHERE: {
        search: '' // 访问类型
      }
    }
  },
  created() {
    this.LIST_API = focusGetList
    // 调试===============
    // this.$store.commit('user/SET_PERMISSION', ['jurisdiction:list'])
    // 调试---------------
  },
  mounted() {
  },
  methods: {

    handleCreate() {
      console.log('新增')
      this.FORM_TYPE = 'create'
      this.FORM_VISIBLE = true
      this.FORM_DATA = {}
    },
    handleEdit(item) {
      console.log('编辑', item)
      this.FORM_TYPE = 'edit'
      this.FORM_DATA = item
      this.FORM_VISIBLE = true
    },
    handleDel(item) {
      console.log('删除', item)
      this.$confirm('确认删除？')
        .then(_ => {
          focusDel(item.id).then(res => {
            console.log('删除结果', res)
            this._showSuccess('删除成功')
            this._getList()
          })
        })
        .catch(_ => {})
    },
    csvToArray(str, delimiter = ',') {
      const header_cols = str.slice(0, str.indexOf('\n')).split(delimiter)
      const row_data = str.slice(str.indexOf('\n') + 1).split('\n')
      const arr = row_data.map(function(row) {
        const values = row.split(delimiter)
        const el = header_cols.reduce(function(object, header, index) {
          object[header] = values[index]
          return object
        }, {})
        return el
      })
      return arr
    },
    async uploadChangeHandel(file) {
      const reader = new FileReader(file)
      reader.readAsBinaryString(file)
      reader.onload = async(e) => {
        const data = e.target.result
        const workbook = XLSX.read(data, { type: 'binary' })
        const sheet = workbook.Sheets
        var aoa = XLSX.utils.sheet_to_csv(sheet[workbook.SheetNames[0]])
        const arrData = this.csvToArray(aoa, ',').filter(
          (p) => p['身份证']
        )
        const upData = arrData.map((p) => {
          return {
            'real_name': p['姓名'], // 姓名
            'id_card': p['身份证'], // 身份证
            'sex': p['性别'], // 性别
            'mobile': p['手机号码'], // 手机号码
            'note': p['关注原因']// 备注

          }
        })
        console.log(upData)
        focusBlukCreate(upData).then(
          p => {
            this.$notify({
              title: 'Success',
              dangerouslyUseHTMLString: true,
              message: `
            操作成功!
          `,
              type: 'success'
            })
            this._getList()
          }
        )

        // await focusCreate({ list: upData })
      }
      this.fileList = []
      return false
    }

  }
}
</script>
